import { Card } from 'antd';
import AMapLoader from '@amap/amap-jsapi-loader';
import { useEffect } from 'react';

let map: any;
const Map = () => {
  useEffect(() => {
    // 初始化地图
    AMapLoader.load({
      key: '9b341012b941a144f73470ff02792923', // 申请好的Web端开发者Key，首次调用 load 时必填
      version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
      plugins: ['AMap.Driving'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    })
      .then((AMap) => {
        map = new AMap.Map('container', {
          zoom: 14, //级别
          center: [120.26408, 30.305451], //中心点坐标
          viewMode: '3D', //使用3D视图
        });

        map.on('complete', () => {
          //构造路线导航类
          // var driving = new AMap.Driving({
          //   map: map,
          //   panel: 'panel',
          // });
          // // 根据起终点经纬度规划驾车导航路线
          // driving.search(
          //   new AMap.LngLat(120.26408, 30.305451),
          //   new AMap.LngLat(120.266633, 30.307913),
          //   function (status: any, result: any) {
          //     // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
          //     if (status === 'complete') {
          //       console.log('绘制驾车路线完成');
          //     } else {
          //       console.log('获取驾车数据失败：' + result + status);
          //     }
          //   },
          // );
          var driving = new AMap.Driving({
            // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
            policy: AMap.DrivingPolicy.LEAST_TIME,
          });

          var startLngLat = [116.379028, 39.865042];
          var endLngLat = [116.427281, 39.903719];

          driving.search(
            startLngLat,
            endLngLat,
            function (status: any, result: any) {
              // 未出错时，result即是对应的路线规划方案
              console.log(result);
            },
          );
        });

        //实时路况图层
        // var trafficLayer = new AMap.TileLayer.Satellite({
        //   zIndex: 10,
        // });
        // map.add(trafficLayer); //添加图层到地图

        // 添加标记点
        // var marker = new AMap.Marker({
        //   position: [120.26408, 30.305451], //位置
        //   icon: '//vdata.amap.com/icons/b18/1/2.png',
        //   offset: new AMap.Pixel(-10, -10),
        // });
        // map.add(marker); //添加到地图

        // 添加矢量图
        // var lineArr = [
        //   [120.26408, 30.305451],
        //   [120.266633, 30.307913],
        //   [120.292713, 30.304507],
        //   [120.26408, 30.305451],
        // ];
        // var polyline = new AMap.Polyline({
        //   path: lineArr, //设置线覆盖物路径
        //   strokeColor: '#3366FF', //线颜色
        //   strokeWeight: 5, //线宽
        //   strokeStyle: 'solid', //线样式
        // });
        // map.add(polyline);

        // 添加插件
        // AMap.plugin('AMap.ToolBar', function () {
        //   //异步加载插件
        //   var toolbar = new AMap.ToolBar();
        //   map.addControl(toolbar);
        // });
        // AMap.plugin('AMap.Scale', function () {
        //   //异步加载插件
        //   var scale = new AMap.Scale();
        //   map.addControl(scale);
        // });

        // 监听点击事件
        // map.on('click', function (ev: any) {
        //   // 触发事件的对象
        //   // var target = ev.target;
        //   // 触发事件的地理坐标，AMap.LngLat 类型
        //   var lnglat = ev.lnglat;
        //   console.log(lnglat);
        //   // 触发事件的像素坐标，AMap.Pixel 类型
        //   // var pixel = ev.pixel;
        //   // 触发事件类型
        //   // var type = ev.type;
        //   // 添加标记点
        //   var marker = new AMap.Marker({
        //     position: [lnglat.lng, lnglat.lat], //位置
        //   });
        //   map.add(marker); //添加到地图

        //   // var layer1 = new AMap.TileLayer.Satellite();
        //   // var layers = [layer1];
        //   // // 添加到地图上
        //   // map.add(layers);
        //   map.setMapStyle('amap://styles/whitesmoke');
        // });

        // 构造矢量圆形
        // var circle = new AMap.Circle({
        //   center: new AMap.LngLat(120.26408, 30.305451), // 圆心位置
        //   radius: 1000, //半径
        //   strokeColor: '#F33', //线颜色
        //   strokeOpacity: 1, //线透明度
        //   strokeWeight: 3, //线粗细度
        //   fillColor: '#ee2200', //填充颜色
        //   fillOpacity: 0.35, //填充透明度
        // });
        // map.add([circle]);

        // 规划路线
        // AMap.plugin('AMap.Driving', function () {
        //   var driving = new AMap.Driving({
        //     // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        //     policy: AMap.DrivingPolicy.LEAST_TIME,
        //   });

        //   // var points = [
        //   //   { keyword: '北京市地震局（公交站）', city: '北京' },
        //   //   { keyword: '亦庄文化园（地铁站）', city: '北京' },
        //   // ];

        //   // driving.search(points, function (status: any, result: any) {
        //   //   // 未出错时，result即是对应的路线规划方案
        //   //   console.log(status);
        //   //   console.log(result);
        //   // });
        //   var startLngLat = [120.26408, 30.305451];
        //   var endLngLat = [120.266633, 30.307913];

        //   driving.search(
        //     startLngLat,
        //     endLngLat,
        //     function (status: any, result: any) {
        //       // 未出错时，result即是对应的路线规划方案
        //       console.log(status);
        //       console.log(result);
        //     },
        //   );
        // });

        // 地图加载完成的生命周期
        // map.on('complete', function () {
        //   // 地图图块加载完成后触发
        //   console.log('地图加载完成了');
        //   // 自动适配到合适视野范围
        //   map.setFitView();
        // });
      })
      .catch((e) => {
        console.log(e);
      });

    return () => {
      // 销毁地图
      map.destroy();
    };
  }, []);

  return (
    <>
      <Card title="地图">
        <div id="container" style={{ height: 350 }}></div>
      </Card>
    </>
  );
};

export default Map;
